<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button id="addTo">+添加商品</button>
        <hr />
        <input type="text" id="searchInput" placeholder="输入商品进行搜索" />
        <div id="add" style="display: none">
            <br />
            商品名称：<input type="text" id="name" /><br /><br />
            商品价格：<input type="number" id="price" /><br /><br />
            商品库存：<input type="number" id="stock" /><br /><br />
            实际销量：<input type="number" id="sales" /><br /><br />
            <button id="product">添加商品</button>&emsp;
            <button id="Cancel">取消添加</button>
        </div>

        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="select" /> ID</th>
                    <th>商品</th>
                    <th onclick="sort(1)">价格↓</th>
                    <th onclick="sort(2)">库存↓</th>
                    <th onclick="sort(3)">实际销量↓</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </body>
</html>

<script>
    addTo.onclick = function () {
        if (document.getElementById("add").style.display == "none") {
            document.getElementById("add").style.display = "block";
        } else {
            document.getElementById("add").style.display = "none";
        }
    };

    window.onload = function () {
        let time = new Date().toLocaleString();
        if (!localStorage.getItem("obj")) {
            localStorage.setItem("obj", JSON.stringify([]));
        }
        page();
        option();
    };
    var nums = 1;
    product.onclick = function product() {
        let name = document.getElementById("name").value;
        let price = document.getElementById("price").value;
        let stock = document.getElementById("stock").value;
        let sales = document.getElementById("sales").value;
        let time = new Date().toLocaleString();
        let data = JSON.parse(localStorage.getItem("obj"));
        if (name != "" && price != "" && stock != "" && sales != "") {
            data.unshift({
                back: false,
                id: nums,
                name: name,
                price: price,
                stock: stock,
                sales: sales,
                time: time,
            });
            localStorage.setItem("obj", JSON.stringify(data));
            nums = data[0].id + 1;
            page();
            emptyInput();
            document.getElementById("add").style.display = "none";
        } else {
            alert("添加商品内容不能为空");
        }
    };
    Cancel.onclick = function Cancel() {
        document.getElementById("add").style.display = "none";
        emptyInput();
    };

    function del(index) {
        if (confirm()) {
            let data = JSON.parse(localStorage.getItem("obj"));
            data.splice(index, 1);
            localStorage.setItem("obj", JSON.stringify(data));
            page();
        }
    }

    function page() {
        let data = JSON.parse(localStorage.getItem("obj"));
        ye(data);
    }

    function ye(data) {
        let html = "";
        data.map((res, i) => {
            html += `<tr>
                        <td><input type="checkbox" ${
                            res.back == true ? "checked" : ""
                        } onclick="option(${i})"> ${res.id}</td>
                        <td>
                            <img src="https://img.zcool.cn/community/0108a15540f2790000017c94049717.jpg@1280w_1l_2o_100sh.jpg" alt="">
                            ${res.name}
                        </td>
                        <td>${res.price}</td>
                        <td>${res.stock}</td>
                        <td>${res.sales}</td>
                        <td>${res.time}</td>
                        <td><a href="#" onclick="del(${i})">删除</a>&emsp;<a href="#" onclick="copy(${i})">复制</a></td>
                    </tr>`;
        });
        document.getElementsByTagName("tbody")[0].innerHTML = html;
    }

    function emptyInput() {
        document.getElementById("name").value = "";
        document.getElementById("price").value = "";
        document.getElementById("stock").value = "";
        document.getElementById("sales").value = "";
    }

    select.onclick = function select() {
        let data = JSON.parse(localStorage.getItem("obj"));
        let select = document.getElementById("select");
        for (i in data) {
            if (select.checked == true) {
                data[i].back = true;
            } else {
                data[i].back = false;
            }
            localStorage.setItem("obj", JSON.stringify(data));
        }
        page();
    };
    var num = 1;
    function option(index) {
        let select = document.getElementById("select");
        let data = JSON.parse(localStorage.getItem("obj"));
        if (num != 1) {
            data[index].back = !data[index].back;

            console.log(123);
        }
        num++;
        console.log(num);
        for (i in data) {
            if (data[i].back != true) {
                select.checked = false;
                localStorage.setItem("obj", JSON.stringify(data));
                return;
            } else {
                select.checked = true;
                localStorage.setItem("obj", JSON.stringify(data));
            }
        }
    }

    searchInput.onkeyup = function () {
        let data = JSON.parse(localStorage.getItem("obj"));
        let inp = document.getElementById("searchInput").value;
        data = data.filter((res) => {
            return res.name.includes(inp);
        });
        ye(data);
    };

    function copy(index) {
        let data = JSON.parse(localStorage.getItem("obj"));
        data.unshift({
            back: data[index].back,
            id: data[index].id,
            name: data[index].name + "-(复制)",
            price: data[index].price,
            stock: data[index].stock,
            sales: data[index].sales,
            time: data[index].time,
        });
        localStorage.setItem("obj", JSON.stringify(data));
        ye(data);
    }

    function sort(n) {
        let data = JSON.parse(localStorage.getItem("obj"));
        switch (n) {
            case 1:
                data.sort((a, n) => {
                    return a.price - n.price;
                });
                ye(data);
                break;
            case 2:
                data.sort((a, n) => {
                    return a.stock - n.stock;
                });
                ye(data);
                break;
            case 3:
                data.sort((a, n) => {
                    return a.sales - n.sales;
                });
                ye(data);
                break;
        }
    }
</script>

<style>
    #Browse {
        width: 70%;
        height: 800px;
        position: absolute;
        top: 50px;
        left: 20rem;
        /* background-color: #fff; */
        background: rgba(0, 0, 0, 0.5);
    }

    #add {
        width: 500px;
        height: 400px;
        font-size: 22px;
        text-align: center;
        background-color: aliceblue;
        position: absolute;
        left: 44rem;
        z-index: 9999999;
    }
    #add input {
        width: 300px;
        height: 35px;
    }
    #product,
    #Cancel {
        width: 150px;
        height: 45px;
        font-size: 20px;
    }
    table {
        width: 90%;
        margin: auto;
        text-align: center;
        border-collapse: collapse;
    }
    th,
    td {
        width: 200px;
        height: 45px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        font-size: 20px;
        color: #323232;
        font-family: "微软雅黑";
    }
    tr {
        border-bottom: 1px solid #ccc;
    }

    #addTo {
        width: 150px;
        height: 45px;
        background-color: #15a2e3;
        color: aliceblue;
        font-size: 20px;
    }
    button {
        border: 1px solid #fff;
    }
    img {
        float: left;
        width: 100px;
        height: 100px;
        border-radius: 30px;
    }

    #searchInput {
        width: 19rem;
        height: 2.5rem;
    }
    #search {
        width: 10rem;
        height: 3rem;
    }
</style>
